import { cn } from "@/lib/utils";
import ReactMarkdown from "react-markdown";

interface MessageItemProps {
  id: string;
  role: string;
  content: string;
}

export function MessageItem({ id, role, content }: MessageItemProps) {
  return (
    <div
      key={id}
      className={cn(
        "w-fit rounded-lg px-3 py-2",
        role === "user"
          ? "ml-auto bg-primary text-primary-foreground max-w-[55%]"
          : "mr-auto bg-muted mb-[75px]"
      )}
    >
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
}
